<template>
  <div class="container">
    <!-- 城市运营商邀请方式 -->
    <div class="bg-white" v-if="shareUser && shareUser.IsISP">
      <div class="logo">
        <img src='../../assets/img/logo-entry.jpg' />
      </div>
      <div class="share-isp" v-if="shareUser && shareUser.ShopName">
        <h3>{{shareUser.ShopName}}</h3>
        <p>邀请您成为品牌主理人</p>
      </div>
      <div class="entry-btns">
        <div class="e-btn btn-login" @click="goToLogin">登录</div>
        <div class="e-btn btn-reg" @click="goToRegister">注册</div>
      </div>
      <div class="wechat-way" v-if="browserType === 'wechat'">
        <div class="othorway">其他登录方式</div>
        <div class="btn-wechat" @click="loginByWechat">
          <img src='../../assets/img/wechat-w.png' />
        </div>
      </div>
      <div class="tips">
        登录即代表同意TITIKA ACTIVE用户协议及隐私政策。
      </div>
    </div>

    <!-- 普通方式 -->
    <div class="bg-black" v-if="!shareUserId || shareUserId === '0' || (shareUserId && shareUser && !shareUser.IsISP)">
      <div class="logo">
        <img src='../../assets/img/logo.png' />
      </div>
      <div class="entry-btns">
        <div class="common-way">
          <div class="e-btn btn-login" @click="goToLogin">登录</div>
          <div class="e-btn btn-reg" @click="goToRegister">注册</div>
        </div>
        <div class="wechat-way" v-if="browserType === 'wechat'">
          <div class="or">或者</div>
          <div class="tips">
            通过微信、手机或邮箱注册TITIKA ACTIVE账号，即表示您已经阅读并同意TITIKA ACTIVE的使用条款及隐私政策。
          </div>
          <div class="e-btn btn-wechat" @click="loginByWechat">使用微信登录</div>
        </div>
      </div>
    </div>

    <div class="loading" v-if="loading">
      <van-loading type="spinner" size="24px" />
    </div>
    
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getQueryString } from '../../utils/'
import { loginWithOpenId } from '../../utils/wx'
import { getUserDetailById } from '../../network/user'
import { getBrowserType } from '../../utils/'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      shareUserId: getQueryString('userId'),
      shareUser: null,
      browserType: localStorage.getItem('browserType'),
      loading: false
    }
  },
  async mounted() {
    // localStorage.clear()
    
    let needRefresh = sessionStorage.getItem('need-refresh')
    if(needRefresh){
      sessionStorage.removeItem('need-refresh')
      location.reload()
    }

    // 运营商或主理人分享的链接进入，清除登录信息
    if(getQueryString('action') === 'invite'){

      if(localStorage.getItem('userKey') && 
        (localStorage.getItem('isBelongMan') || localStorage.getItem('isISP'))
      ){
        // 主理人或运营商再次登录
        this.$router.push('best')
      } else {
        // 清除存储信息后关联注册或登录
        localStorage.clear()
        sessionStorage.clear()
      }
    }
    // 获取浏览器类型
    this.browserType = getBrowserType()
    
    if(this.shareUserId!=='0' && this.shareUserId!==null){
      localStorage.setItem('shareUserId', this.shareUserId)
      this.getShareUser()
    }
  },
  methods: {
    getShareUser(){
      getUserDetailById(this.shareUserId, info => {
        this.shareUser = info
        localStorage.setItem('shareUser', JSON.stringify(info))
      })
    },
    goToLogin(){
      this.$router.push('/login')
    },
    goToRegister(){
      this.$router.push({
        path: '/regnewPhone',
      })
    },
    loginByWechat(){
      // 微信端，code获取openid自动登录
      if(this.browserType === 'wechat'){

        localStorage.removeItem("userKey")
        localStorage.removeItem("userId")
        localStorage.removeItem("CellPhone")
        
        this.loading = true
        loginWithOpenId(this, 'entry')
        localStorage.setItem('wxLoginClicked', true)
      }
    },
  },
  
}
</script>

<style scoped>

.bg-black{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}
.bg-black .logo img{
  width: 100px;
}
.bg-black .entry-btns{
  margin-top: 50px;
  text-align: center;
  padding: 0 30px;
  width: 80%;
}
.bg-black .entry-btns .e-btn{
  line-height: 44px;
  border-radius: 50px;
  background-color: #4d4d4d;
}
.bg-black .common-way{
  display: flex;
  justify-content: space-between;
}
.bg-black .common-way .e-btn{
  width: 46%;
}
.bg-black .wechat-way .e-btn{
  background: #0e8805;
}
.bg-black .wechat-way .or{
  padding: 45px 0 30px 0;
}
.bg-black .tips{
  font-size: 12px;
  padding: 15px 0 50px 0;
}
.loading{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
}
.bg-black .share-isp{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 33px;
  line-height: 33px;
  color: #222;
  text-align: center;
  font-size: 14px;
  background-color: #ddd;
}

.bg-white{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 0 50px;
  text-align: center;
}
.bg-white .logo{
  padding-top: 30px;
  padding-bottom: 15px;
}
.bg-white .logo img{
  width: 58%;
}
.bg-white .share-isp{
  width: 100%;
  text-align: left;
}
.bg-white .share-isp h3{
  font-size: 26px;
  padding: 10px 0;
  font-weight: bold;
}
.bg-white .entry-btns{
  width: 100%;
  padding-top: 25px;
  flex-grow: 1;
}
.bg-white .entry-btns .e-btn{
  line-height: 45px;
  border-radius: 45px;
  margin-bottom: 25px;
  background-color: #4d4d4d;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.bg-white .btn-wechat{
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 23px 0 35px 0;
  border-radius: 50%;
  background-color: #219910;
}
.bg-white .btn-wechat img{
  width: 60%;
  margin-top: 10px;
}
.bg-white .tips{
  font-size: 12px;
  margin: 0 -20px 20px -10px;
  text-align: center;
}
</style>